<template>
  <div>
    <Form
      :disabled='!isEdit'
      ref='form'
      :model='formData'
      :rules='formRules'
      :label-width='100'
    >
      <FormItem label='菜单标题' prop='title'>
        <i-input v-model='formData.title' placeholder='请输入菜单标题' />
      </FormItem>
      <FormItem label='菜单路由' prop='path'>
        <i-input v-model='formData.path' placeholder='请输入菜单路由' />
      </FormItem>
      <FormItem label='菜单类型' prop='type'>
        <Select v-model='formData.type' placeholder='请选择菜单类型'>
          <Option v-for='item in types' :value='item.value' :key='item.value'
          >{{ item.label }}
          </Option>
        </Select>
      </FormItem>
      <template v-if='formData.type !== 3'>
        <FormItem label='组件名称' prop='name'>
          <i-input v-model='formData.name' placeholder='请输入组件名称' />
        </FormItem>
        <FormItem label='组件'>
          <i-input v-model='formData.component' placeholder='请输入前端组件名称'>
            <span slot='prepend'>()=>import('@/</span>
            <span slot='append'>.vue')</span>
          </i-input>
        </FormItem>
        <FormItem label='面包屑' prop='hideInBread'>
          <Switch size='large' v-model='formData.hideInBread'>
            <span slot='open'>显示</span>
            <span slot='close'>隐藏</span>
          </Switch>
        </FormItem>
        <FormItem label='菜单显示' prop='hideInMenu'>
          <Switch size='large' v-model='formData.hideInMenu'>
            <span slot='open'>显示</span>
            <span slot='close'>隐藏</span>
          </Switch>
        </FormItem>
        <FormItem label='子菜单显示' prop='hideChildren'>
          <Switch size='large' v-model='formData.hideChildren'>
            <span slot='open'>显示</span>
            <span slot='close'>隐藏</span>
          </Switch>
        </FormItem>
        <FormItem label='页面缓存' prop='notCache'>
          <Switch size='large' v-model='formData.notCache'>
            <span slot='open'>开启</span>
            <span slot='close'>关闭</span>
          </Switch>
        </FormItem>
      </template>
      <template v-else>
        <FormItem label='链接'>
          <i-input v-model='formData.link' placeholder='请输入跳转链接'></i-input>
        </FormItem>
      </template>
      <FormItem label='图标' prop='icon'>
        <i-input v-model='formData.icon' placeholder='请输入图标名称' />
      </FormItem>
      <FormItem label='重定向' prop='redirect'>
        <i-input v-model='formData.redirect' placeholder='请输入重定向地址' />
      </FormItem>
      <FormItem label='排序' prop='sort'>
        <i-input v-model='formData.sort' placeholder='组件默认排序' />
      </FormItem>
      <FormItem v-if='isEdit'>
        <Button type='primary' @click='submit()'>确定</Button>
        <Button type='error' style='margin-left: 8px' @click='cancel()'
        >取消
        </Button
        >
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      formRules: {
        name: [
          { required: true, message: '菜单名称不能为空', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '菜单标题不能为空', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '菜单路由不能为空', trigger: 'blur' }
        ],
        component: [
          { required: true, message: '前端组件不能为空', trigger: 'blur' }
        ]
      },
      types: [
        {
          value: 1,
          label: '目录'
        },
        {
          value: 2,
          label: '资源'
        },
        {
          value: 3,
          label: '链接'
        }
      ]
    }
  },
  computed: {
    formData() {
      return this.data
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 检验通过后的逻辑
          const data = {
            ...this.formData,
            expand: true
          }
          this.$emit('submit', data)
          // 恢复到默认状态
          this.initFields()
          // 2. 提交对应的数据到后台接口
        } else {
          this.$Message.error('请检验表单数据！')
        }
      })
    },
    cancel() {
      this.initFields()
    },
    initFields() {
      this.$emit('cancel')
      this.$refs.form.resetFields()
    },
    setMenu(data) {
      this.$emit('submit', data)
    }
  }
}
</script>

<style lang='scss' scoped></style>
